import QtQuick 2.5
import QtGraphicalEffects 1.0
import "../../CMDSender.js" as Controler

Item {
    id:root
    width:parent.width
    height:parent.height

    Behavior on opacity {
        PropertyAnimation{
            properties: "opacity"
            duration: 500
        }
    }

    ListModel{
        id:curtainModel

    }

    ListView{
        anchors.fill: parent
        model: curtainModel
        delegate: Item{
            width: parent.width
            height:250*Device.dentisty
            //curtain open scale pad
            Image {
                id: openScalePad
                source: "qrc:/imgs/control/smartHomeIcons/control/curtain_open_scale_pad.png"
                anchors.verticalCenter: parent.verticalCenter
                x:20*Device.dentisty
            }

            Rectangle {
                id: mask
                anchors.bottom: openScalePad.bottom
                color:"#3312ffff"
                smooth: true
                visible: false
                width:openScalePad.width
                height:openScale*openScalePad.height
                anchors.left: openScalePad.left
            }

            Rectangle {
                id: bug
                width: openScalePad.width
                height: width
                radius: width/2
                smooth: true
                visible: false
                color:"#3312ffff"
                anchors.bottom: openScalePad.bottom
                anchors.left: openScalePad.left
            }

            OpacityMask {
                anchors.fill: bug
                source: bug
                maskSource: mask
            }

            Text{
                anchors.centerIn: openScalePad
                text:openScale*100+"%"
                font.pointSize: 20
                color:"#ffffff"
            }

            //title
            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                y:10*Device.dentisty
                text:name
                font.pointSize: 20
                color:"#ffffff"
                Rectangle{
                    anchors.centerIn: parent
                    width: parent.width+20
                    height:parent.height+10
                    color:"#00000000"
                    border.width: 1
                    border.color: "#33000000"
                    radius: 3*Device.dentisty
                }
            }

            //control bnts
            Row{
                id:bnts1
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 20*Device.dentisty
                spacing: 20*Device.dentisty
                Image {
                    id: closebnt
                    source: "qrc:/imgs/control/smartHomeIcons/control/bnt_cutain_close.png"
                    width: 50*Device.dentisty
                    height:width
                    Rectangle{
                        anchors.fill: parent
                        radius: width/2
                        color:"#33000000"
                        id:closecap
                        opacity: 0
                    }

                    MouseArea{
                        anchors.fill: parent
                        onEntered: closecap.opacity=1
                        onExited: closecap.opacity=0
                        onClicked: {
                            if(TcpSocket.tcpState==="connected")
                                TcpSocket.sendData(tname+"_close#!");
                            else
                                Controler.send(tname+"_close");
                        }
                    }
                }
                Image {
                    id: stopbnt
                    source: "qrc:/imgs/control/smartHomeIcons/control/bnt_curtain_stop.png"
                    width: 50*Device.dentisty
                    height:width
                    Rectangle{
                        anchors.fill: parent
                        radius: width/2
                        color:"#33000000"
                        id:stopcap
                        opacity: 0
                    }

                    MouseArea{
                        anchors.fill: parent
                        onEntered: stopcap.opacity=1
                        onExited: stopcap.opacity=0
                        onClicked: {
                            if(TcpSocket.tcpState==="connected")
                                TcpSocket.sendData(tname+"_pause#!");
                            else
                                Controler.send(tname+"_pause");
                        }
                    }
                }
                Image {
                    id: openbnt
                    source: "qrc:/imgs/control/smartHomeIcons/control/bnt_curtain_open.png"
                    width: 50*Device.dentisty
                    height:width
                    Rectangle{
                        anchors.fill: parent
                        radius: width/2
                        color:"#33000000"
                        id:opencap
                        opacity: 0
                    }

                    MouseArea{
                        anchors.fill: parent
                        onEntered: opencap.opacity=1
                        onExited: opencap.opacity=0
                        onClicked: {
                            if(TcpSocket.tcpState==="connected")
                                TcpSocket.sendData(tname+"_open#!")
                            else
                                Controler.send(tname+"_open");
                        }
                    }
                }
            }

            Column{
                anchors.centerIn: bnts1
                spacing: 90*Device.dentisty
                Image {
                    id: upbnt
                    source: "qrc:/imgs/control/smartHomeIcons/control/bnt_curtain_up.png"
                    width: 50*Device.dentisty
                    height:width
                    Rectangle{
                        anchors.fill: parent
                        radius: width/2
                        color:"#33000000"
                        id:upcap
                        opacity: 0
                    }

                    MouseArea{
                        anchors.fill: parent
                        onEntered: upcap.opacity=1
                        onExited: upcap.opacity=0
                    }
                }
                Image {
                    id: downbnt
                    source: "qrc:/imgs/control/smartHomeIcons/control/bnt_curtain_down.png"
                    width: 50*Device.dentisty
                    height:width
                    Rectangle{
                        anchors.fill: parent
                        radius: width/2
                        color:"#33000000"
                        id:downcap
                        opacity: 0
                    }

                    MouseArea{
                        anchors.fill: parent
                        onEntered: downcap.opacity=1
                        onExited: downcap.opacity=0
                    }
                }


            }

            //line
            Image {
                id: line
                anchors.bottom: parent.bottom
                source: "qrc:/imgs/control/smartHomeIcons/control/icon_line.png"
                width:parent.width
            }

        }
    }


    //init worker
    Timer{
        id:worker
        interval: 300
        property int count:1
        running: count<=3
        repeat: true
        onTriggered: {
            curtainModel.append({
                                  "name":"窗帘"+String(count),
                                  "openScale":(count+1)/5,
                                  "canUpDown":count%2===0?true:false,
                                  "tname":"curtain_0"+count
                              });
            count++;
        }
    }
}
